<template>
  <lb-layout v-loading="$store.getters.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item prop="sysDeptList">
        <cascader-select v-model="queryParams.sysDeptList" :values="queryParams.sysDeptList" varient="energy"
          node-key="id" size="small" placeholder="请选择用能单位"></cascader-select>
      </el-form-item>
      <el-form-item prop="energyType">
        <el-select v-model="queryParams.energyType" placeholder="请选择能耗种类">
          <el-option v-for="dict in dict.type.energy_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item prop="year">
        <el-date-picker v-model="queryParams.year" type="year" value-format="yyyy" placeholder="请选择能耗预算年份"
          :clearable="false">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <Title name="额度超支趋势" :line="false">
              <div slot="append">
                <div class="constip" v-show="activeName == '0'" style="float: right">
                  <div class="cons-tabs mb10">
                    <el-radio-group v-model="consumptionTabsName" @change="handleConTabsChange" size="small">
                      <el-radio-button v-for="(item, index) in consumptionTabsArr" :key="index" :label="item.value">
                        {{ item.label }}
                      </el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="unit">
                    <span>单位:</span>
                    <span>kwh</span>
                  </div>
                </div>
                <div v-show="activeName == '1'" style="float: right">
                  <div class="unit">
                    <span>单位:</span>
                    <span>元/人年</span>
                  </div>
                </div>
              </div>
            </Title>
          </div>
          <div class="box-content">
            <comCons ref="consumption" v-show="activeName == '0'" :height="200" :comConsdata="comConsdata" />
            <comAnalyse :activeName="activeName" v-show="activeName == '1'" :height="200" />
          </div>
        </el-card>
        <el-card>
          <div slot="header">
            <Title name="预算超支趋势" :line="false">
              <div slot="append">
                <div class="unit">
                  <span>单位:</span>
                  <span>元</span>
                </div>
              </div>
            </Title>
          </div>
          <div>
            <comBudget :comBudgetdata="comBudgetdata" :height="200" />
          </div>
        </el-card>
      </el-col>

    </el-row>
  </lb-layout>
</template>

<script>
import CascaderSelect from "@/components/Select/CascaderSelect";
import { dealElectricity } from "@/utils/index";
import comBudget from "@/views/work/quota/budget/components/budget.vue"; // 能耗预算管控趋势分析
import { getEnergyConsumption } from "@/api/index/index";
import comCons from "@/views/home/consumption/consumption.vue"; // 能耗量分析
import comAnalyse from "@/views/home/analyse/analyse.vue"; // 负外部性内部化分析

export default {
  name: "budgetStatic",
  dicts: ["energy_type"],
  components: {
    CascaderSelect,
    comBudget,
    comCons,
    comAnalyse,
  },
  data() {
    return {
      // 能耗分析
      consumptionTabsName: "0",
      consumptionTabsArr: [
        {
          label: "分时段",
          value: "0",
        },
        {
          label: "分部门",
          value: "1",
        },
      ],
      activeName: "0",
      daypartingUsedStatics: {},
      deptUsedStatics: {},

      // 能耗量分析
      comConsdata: {
        daypartingUsedStatics: {},
        deptUsedStatics: {},
      },
      // 能耗预算管控趋势分析
      comBudgetdata: {
        budgetManageStatics: {},
      },
      // 查询参数
      queryParams: {
        sysDeptList: [],
        energyType: "0",
        year: "",
      },
    };
  },
  created() {
    this.queryParams.year = new Date().getFullYear() + "";
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      let that = this;
      const data = {
        year: this.queryParams.year,
        energyType: this.queryParams.energyType,
        deptId:
          this.queryParams.sysDeptList[this.queryParams.sysDeptList.length - 1],
      };
      that.$store.commit("app/updateApiCount", "add");
      getEnergyConsumption(data)
        .then((res) => {
          // console.log(res, "首页统计");
          that.$store.commit("app/updateApiCount");
          if (res.code === 200) {
            // 能耗量分析
            // 分时段
            that.daypartingUsedStatics = res?.data?.daypartingUsedStatics;
            that.daypartingUsedStaticsdeal(that.daypartingUsedStatics);
            // 分部门
            this.deptUsedStatics = res?.data?.deptUsedStatics;
            this.deptUsedStaticsdeal(this.deptUsedStatics);
            // 能耗预算管控趋势分析
            this.budgetManageStatics = res?.data?.budgetManageStatics;
            this.budgetManageStaticsdeal(this.budgetManageStatics);
          }
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!20098");
        });

    },
    handleConTabsChange() {
      this.$refs.consumption.fatherTellmego(this.consumptionTabsName);
    },

    // 能耗量分析
    daypartingUsedStaticsdeal(data) {
      let seriesData = data.seriesData;
      // console.log(seriesData, "yyyy");
      let xaxisData = data.xaxisData;
      // /100
      this.divide100(seriesData);
      this.comConsdata.daypartingUsedStatics = {
        xData: xaxisData,
        yData: seriesData,
      };
      this.handleConTabsChange();
    },
    deptUsedStaticsdeal(data) {
      let seriesData = data.seriesData;
      let xaxisData = data.xaxisData;
      // /100
      this.divide100(seriesData);
      this.comConsdata.deptUsedStatics = {
        xData: xaxisData,
        yData: seriesData,
      };
    },
    // 除以100
    divide100(arr) {
      arr.forEach((tig) => {
        if (tig.data.length > 0) {
          for (let i = 0; i < tig.data.length; i++) {
            tig.data[i] = dealElectricity(Number(tig.data[i]));
          }
        }
      });
    },
    // 能耗预算管控分析
    budgetManageStaticsdeal(data) {
      let seriesData = data.seriesData.filter(
        (item) => item.name == "实际电费" || item.name == "电度电费"
      );
      if (seriesData.length > 0) {
        seriesData.map((tig) => {
          tig.itemStyle = {
            normal: {
              color: "#3669D4",
            },
          };
          if (tig.name == "电度电费") {
            tig.name = "预算电费";
            tig.itemStyle = {
              normal: {
                color: "#E1B228",
              },
            };
          }
          if (tig.data.length > 0) {
            for (let i = 0; i < tig.data.length; i++) {
              tig.data[i] = (Number(tig.data[i]) / 100).toFixed(2);
            }
          }
        });
      }
      let xaxisData = data.xaxisData;
      this.comBudgetdata.budgetManageStatics = {
        xData: xaxisData,
        yData: seriesData,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
